import React, { useState, useEffect } from "react";
import { Button, Modal } from "antd";
import {
  CheckCircleOutlined,
  CloseCircleOutlined,
  InfoCircleOutlined
} from "@ant-design/icons";

export default (props: any) => {
  const {
    destroy = false,
    successCallback = null,
    closeCallback = null,
    visible = true,
    text = "",
    title = "",
    footer,
    type = "",
    width = undefined,
    maskClosable = true,
    closable = true,
    setVisible,
    checkChildren
  } = props;

  const [isFromSubmitDisable, setIsFormSubmitDisable] = useState(
    !!checkChildren
  );

  useEffect(() => {
    if (checkChildren) {
      const params = checkChildren.form.validateFields();
      params
        .then((values: any) => {
          if (Object.keys(values).length !== 0) {
            setIsFormSubmitDisable(false);
          }
        })
        .catch((err) => {
          err.errorFields.length === 0
            ? setIsFormSubmitDisable(false)
            : setIsFormSubmitDisable(true);
        });
    }
  }, [checkChildren && checkChildren.currentInput]);

  const isPromise = (obj: any) => {
    return (
      !!obj &&
      (typeof obj === "object" || typeof obj === "function") &&
      typeof obj.then === "function"
    );
  };

  const callbackHandle = (handleFn) => {
    if (handleFn !== null) {
      if (typeof handleFn !== "function") {
        throw new Error("请输入函数");
      }

      const callback = handleFn();

      if (isPromise(callback)) {
        return callback.then((res) => {
          setVisible(false);
        });
      }

      return new Promise((resolve, reject) => {
        resolve(callback);
      }).then((res) => {
        if (res !== false) {
          setVisible(false);
        }
      });
    }

    setVisible(false);
  };

  const handleOk = () => {
    callbackHandle(successCallback);
  };

  const handleCancel = () => {
    callbackHandle(closeCallback);
  };

  return (
    <Modal
      width={width}
      destroyOnClose={destroy}
      title={title || "提示"}
      visible={visible}
      onOk={handleOk}
      onCancel={handleCancel}
      maskClosable={maskClosable}
      closable={closable}
      footer={
        footer || [
          <Button key="back" onClick={handleCancel}>
            取消
          </Button>,
          <Button
            key="submit"
            type="primary"
            disabled={isFromSubmitDisable}
            onClick={handleOk}
          >
            确定
          </Button>
        ]
      }
    >
      {text ? (
        <p style={{ display: "flex", alignItems: "center", fontSize: 20 }}>
          {type === "success" ? (
            <CheckCircleOutlined
              style={{ color: "#52c41a", fontSize: 24, marginRight: 14 }}
            />
          ) : null}
          {type === "error" ? (
            <CloseCircleOutlined
              style={{ color: "red", fontSize: 24, marginRight: 14 }}
            />
          ) : null}
          {type === "warning" ? (
            <InfoCircleOutlined
              style={{ color: "#1890ff", fontSize: 24, marginRight: 14 }}
            />
          ) : null}
          {text}
        </p>
      ) : (
        props.children
      )}
    </Modal>
  );
};
